/**
 * Created by Administrator on 2017/3/21.
 */
import React, { Component, Fragment } from 'react';
import {Form, Input, DatePicker, message, Button, Tabs, Alert, Table, Col, Row, Badge, Modal,Icon} from 'antd';
import { connect } from 'dva';
import L from 'leaflet';   //引入leaflet
import MyPagination from '@/components/MyPagination';
import './index.less';
import './../Home/leaflet.less';
import Template2 from './Template2';
import {afterCloseModal, getTimeDistance, isInAlarmContent, timeStamp} from '@/utils/utils';
import ReactDataGrid from 'react-data-grid';
import forEach from 'lodash/forEach';
import moment from 'moment';
import request from '@/utils/request';
import ReactEcharts from 'echarts-for-react';
import ValveHistoryData from "@/pages/ValveFlowMeterSIte/ValveHistoryData";
import BuildModalTitle from "@/components/BuildModalTitle";
import find from "lodash/find";
const { TabPane } = Tabs;
const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      color:'#fff',
      type:'modbus',
      name:'',
      renderName:'',
      channel:0,
      showType: 1,
      historyData: [],
      config_data: {
        modbus: [{}]
      },
      alarm_content:[],
      start_date: moment().format('YYYY-MM-DD'),
      end_date: moment().format('YYYY-MM-DD'),
      isWatch:false,
      tabPanes: [{
        name: '设备信息',
        key: 'device',
      }, {
        name: '阀前压力',
        key: 'sensor_0',
      }, {
        name: '阀后压力',
        key: 'sensor_1',
      },{
        name: '液位',
        key: 'sensor_2',
      } ,{
        name: '球阀1',
        key: 'ball_valve_0',
      },{
        name: '球阀2',
        key: 'ball_valve_1',
      }, {
        name: '井盖传感器',
        key: 'digital_input_0',
      }],
      digital_input_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      device_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
        loading: false,
      },
      modbus_0: {
        meta: {total: 0, per_page: 0, current_page: 1},
        data: [], loading: false,
      },
      sensor_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_1: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_2: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_0_chart: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_1_chart: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      sensor_2_chart: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [], loading: false,
      },
      ball_valve_0: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
        loading: false,
      },
      ball_valve_1: {
        meta: { total: 0, per_page: 0, current_page: 1 },
        data: [],
        loading: false,
      },
    };
  }

  componentDidMount() {
    const that = this;
    this.fetchBaseInfo();
    for(let i=0;i<1;i++){
      this.fetch({
        type:'digital_input',
        channel:i,
        page:1,
        per_page:20,
      })
    }
    this.fetch({
      type: 'sensor',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'sensor',
      channel: 1,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'device',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'ball_valve',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'ball_valve',
      channel: 1,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'sensor',
      channel: 2,
      page: 1,
      per_page: 20,
    });
    that.fetSensors()
    this.timer=setInterval(function() {
      that.fetSensors();
      // that.fetHistory();
      // that.fetchBaseInfo();
    },15000)

  }
  fetchBaseInfo=()=>{
    const that = this;
    request(`/workstations/${this.props.editRecord.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        console.log('fetchBaseInfo', response);
        this.setState({
          config_data: response.data.data.hardware_configs,
          isWatch:response.data.data.is_watch,
          alarm_content:response.data.data.alarm_content
        });
      }
    });
  }
  openWatch=()=>{
    const that=this;
    request(`/workstations/${this.props.editRecord.id}/watch_mode`, {
      method: 'PUT',
    }).then(response => {
      if (response.status === 200) {
        message.success('开启监控模式成功')
        that.fetchBaseInfo()

      }
    });
  }
  componentWillUnmount() {
    if(this.timer){
      clearInterval(this.timer)
    }
  }
  fetSensors=()=>{
    this.fetchChart({
      type:'sensor',
      channel:0,
      page:1,
      per_page:300
    })
    this.fetchChart({
      type:'sensor',
      channel:1,
      page:1,
      per_page:300
    })
    this.fetchChart({
      type:'sensor',
      channel:2,
      page:1,
      per_page:300
    })
  }

  selectDate = (type) => {
    const that = this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    }, function() {
      // that.fetch();
    });
  };
  fetch = (params) => {
    const that = this;
    this.setState({
      [`${params.type}_${params.channel}`]: {
        meta: this.state[`${params.type}_${params.channel}`].meta,
        data: this.state[`${params.type}_${params.channel}`].data,
        loading: true,
      },
    });
    request(`/workstation_historical_data`, {
      method: 'GET',
      params: {
        ...params,
        start_date: this.state.start_date,
        end_date: this.state.end_date,
        workstation_id: this.props.editRecord.id,
        order_direction:'desc'
      },
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          [`${params.type}_${params.channel}`]: {
            meta: response.data.meta,
            data: response.data.data,
            loading: false,

          },
        });
      }
    });
  };
  fetchChart = (params) => {
    const that = this;
    request(`/workstation_historical_data`, {
      method: 'GET',
      params: {
        ...params,
        start_date: this.state.start_date,
        // start_date: '2020-10-10',
        end_date: this.state.end_date,
        workstation_id: this.props.editRecord.id,
        order_direction:'desc'
      },
    }).then(response => {
      if (response.status === 200) {
        that.setState({
          [`${params.type}_${params.channel}_chart`]: {
            meta: response.data.meta,
            data: response.data.data,
            loading: false,
          },
        });
      }
    });
  };
  handleRangePickerChange = (dateString, type) => {
    const that = this;
    this.setState({
      [type]: dateString,
    }, function() {

    });
  };
  fetHistory=()=>{
    for(let i=0;i<1;i++){
      this.fetch({
        type:'digital_input',
        channel:i,
        page:1,
        per_page:20,
      })
    }
    this.fetch({
      type: 'device',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'sensor',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'sensor',
      channel: 1,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'sensor',
      channel: 2,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'ball_valve',
      channel: 0,
      page: 1,
      per_page: 20,
    });
    this.fetch({
      type: 'ball_valve',
      channel: 1,
      page: 1,
      per_page: 20,
    });
  }
  getOption0=()=>{
    let sensor_0=JSON.parse(JSON.stringify(this.state.sensor_0_chart))
    let sensor_0_reverse=sensor_0.data.reverse();
    let sensor_1=JSON.parse(JSON.stringify(this.state.sensor_1_chart))
    let sensor_1_reverse=sensor_1.data.reverse();
    let parseData = [];
    let parseData1 = [];
    const that=this;
    parseData = sensor_0_reverse.map((item, index) => {
      return [(moment(item.collected_at, "YYYY-MM-DD  HH:mm:ss").diff(moment(that.state.start_date, "YYYY-MM-DD  HH:mm:ss"))) / 1000, item.data.value]
    });
    parseData1 = sensor_1_reverse.map((item, index) => {
      return [(moment(item.collected_at, "YYYY-MM-DD  HH:mm:ss").diff(moment(that.state.start_date, "YYYY-MM-DD  HH:mm:ss"))) / 1000, item.data.value]
    });
    // console.log('parseData',parseData)

    let option = {
      title: {
        text: '压力值',
        textStyle:{
          color:'#ff5190'
        }
      },
      tooltip: {
          trigger: 'axis',
          formatter: function (datas) {
            var res = ''
            for (var i = 0, length = datas.length; i < length; i++) {
              // console.log('datas[i]',datas[i])
              let time = (moment(that.state.start_date).add(datas[i].data[0], 's')).format('MM-DD HH:mm:ss')
              // let time=''
              let value = datas[i].data[1]
              res +=time + '：' +  datas[i].seriesName + '：'
                + value + '<br/>'
            }
            return res
          }
        },
      legend: {
        data: ['阀前压力(MPa)','阀后压力(MPa)']
      },
      grid: {
        top:'35px',
        left: '3%',
        right: '5%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: false,
        // data:time,
        axisLabel: {
          showMaxLabel: true,
          formatter: function (value, index) {
            return (moment(that.state.start_date).add(value, 's')).format('MM-DD HH:mm:ss')
          }
        }
      },
      yAxis: {
        type: 'value',
        max:1
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0],
        },
      ],
      series: [
        {
          name: '阀前压力(MPa)',
          type: 'line',
          large:true,
          smooth:true,
          data: parseData,
          lineStyle:{
            width:3
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                },
                formatter: (params) => {
                  if (parseData.length - 1 == params.dataIndex) {
                    return params.value[1]
                  } else {
                    return ""
                  }
                },
              },
            }
          },
          markLine: {
            silent: false,
            label: {
              formatter: '{b} {c}',
              position: 'middle'
            },
            data: [{
              name: '阀前欠压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[0].under
            }, {
              name: '阀前过压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[0].over
            }]
          }
        },
        {
          name: '阀后压力(MPa)',
          type: 'line',
          large:true,
          smooth:true,
          data: parseData1,
          lineStyle:{
            width:3
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                },
                formatter: (params) => {
                  if (parseData1.length - 1 == params.dataIndex) {
                    return params.value[1]
                  } else {
                    return ""
                  }
                },
              },
            }
          },
          markLine: {
            silent: false,
            label: {
              formatter: '{b} {c}',
              position: 'middle'
            },
            data: [{
              name: '阀后欠压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[1].under
            }, {
              name: '阀后过压值',
              yAxis: this.props.editRecord.hardware_configs.sensor[1].over
            }]
          }
        }
      ]
    };
    return option
  }
  getOption3=()=>{
    var colors = ['#00ce1d', '#00ce1d', '#ff7d00'];
    let fahou=[];
    let time=[];
    let sensor_1=JSON.parse(JSON.stringify(this.state.sensor_2_chart))
    let sensor_1_reverse=sensor_1.data.reverse()
    let unit=''
    for(let i=0;i<sensor_1_reverse.length;i++){
      if(sensor_1_reverse[i]){
        time.push(sensor_1_reverse[i].collected_at.slice(5))
        fahou.push(sensor_1_reverse[i].data.value)
        switch (Number(sensor_1_reverse[i].data.unit)){
          case 0:
            unit= 'Mpa';
            break;
          case 1:
            unit= 'Kpa';
            break;
          case 2:
            unit= 'Pa';
            break;
          case 3:
            unit= 'Bpa'; break;
          case 4:
            unit= 'Mbpa'; break;
          case 5:
            unit= 'kg/cm2'; break;
          case 6:
            unit= 'psi'; break;
          case 7:
            unit= 'mh2o'; break;
          case 8:
            unit= 'mmh2o'; break;
          case 9:
            unit= 'mA'; break;
          default:
            unit= ''; break;
        }

      }
    }
    let option = {
      color: colors,
      title: {
        text: '液位',
        textStyle:{
          color:'#00ce1d'
        }
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: [`测量值(m)`]
      },
      grid: {
        top:'35px',
        left: '3%',
        right: '5%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data:time,
        axisLabel: {
          showMaxLabel: true
        }
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name:`测量值(m)`,
          type: 'line',
          large:true,
          smooth:true,
          data: fahou,
          lineStyle:{
            width:5
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                },
                formatter: (params) => {
                  if (fahou.length - 1 == params.dataIndex) {
                    return params.value
                  } else {
                    return ""
                  }
                },
              },
            }
          },
        },

      ]
    };
    return option
  }

  upTo=(v,step)=>{
    const mod = v % step;

    return mod ? v - mod + step : v;
  }

  render() {
    console.log('render')
    let template = '';
    const that = this;
    return (
      <div style={{ marginTop: '-24px' }} style={{ minHeight: '400px' }}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="阀前/后压力、液位曲线" key="1">
            {
              find(this.permissions, { name:'watch_mode' }) &&<Fragment>
                {this.state.isWatch === -1 ?
                  <div onClick={this.openWatch} style={{marginBottom: '10px'}}><Button
                    type={'primary'}>开启监控模式</Button></div>
                  : <Alert message="正处于监控模式" type="info" showIcon/>
                }
              </Fragment>

            }
            <Row>
            <div style={{fontSize:'16px',margin:'10px 0'}}>只显示最新300条数据</div>
              <Col span={24} style={{position:'relative'}}>
                <Button style={{position: 'absolute', right: '10px', top: '10px', zIndex: '19'}} size={'small'}
                        onClick={() => {
                          this.setState({
                            HistoryDataModal: true,
                            color: ['#ff5190','#009fff'],
                            type: 'sensor',
                            channel: [0,1],
                            name: ['阀前压力','阀后压力'],
                            renderName: 'value'
                          })
                        }}>历史曲线</Button>
              <ReactEcharts
                option={this.getOption0()}
                style={{ height: '350px', width: '100%' }}
                theme='my_theme'
              />
            </Col>
              <Col span={24} style={{position:'relative'}}>
                <Button style={{position:'absolute',right:'10px',top:'10px',zIndex:'19'}} size={'small'} onClick={()=>{
                  this.setState({HistoryDataModal:true,color:'#00ce1d',type:'sensor',channel:2,name:'液位',renderName:'value'})
                }}>历史曲线</Button>
                <ReactEcharts
                  option={this.getOption3()}
                  style={{ height: '250px', width: '100%' }}
                  theme='my_theme'
                />
              </Col>
            </Row>


          </TabPane>
          <TabPane tab="站点完整数据" key="3">
            <div style={{ marginLeft: '16px' }}>
              开始时间 : <DatePicker
              value={moment(this.state.start_date)}
              allowClear={false}
              format="YYYY-MM-DD"
              style={{ width: 150, marginRight: '10px' }}
              placeholder={'开始日期'}
              onChange={(e, dateString) => this.handleRangePickerChange(dateString, 'start_date')}
            />
              结束时间 : <DatePicker
              allowClear={false}
              value={moment(this.state.end_date)}
              format="YYYY-MM-DD"
              placeholder={'结束日期'}
              style={{ width: 150 }}
              onChange={(e, dateString) => this.handleRangePickerChange(dateString, 'end_date')}
            />
            <Button type={'primary'} style={{marginLeft:'10px'}} onClick={()=>{
                this.fetHistory()
              if(this.timer){
                clearInterval(this.timer)
              }
            }}>刷新</Button>
              <Button type={'primary'} style={{ marginLeft: '10px' }} onClick={() => {
                this.props.downloadHistory(this.state.start_date, this.state.end_date, this.props.editRecord.id);

              }}>下载当前时间段数据</Button>
            </div>
            <Tabs size={'small'} style={{ marginTop: '8px' }}  defaultActiveKey="sensor_0">
              {
                this.state.tabPanes.map((item, index) => {
                  let renderTab = '';
                  if (item.key === 'device') {
                    renderTab = <TabPane tab={<span>{item.name} {isInAlarmContent(this.state.alarm_content,'device',0)&&<Icon type="bell" style={{color:'red'}}/>}</span>
                    } key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`device_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`device_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.device_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '运行时间',
                              dataIndex: 'uptime',
                              width: 120,
                              render: (text, record) => (
                                timeStamp(record.data.uptime)
                              ),
                            },
                            {
                              title: '重置原因',
                              dataIndex: 'reset_reason',
                              width: 80,
                              render: (text, record) => (
                                record.data.reset_reason
                              ),
                            },
                            {
                              title: <span>供电电压(V)</span>,
                              dataIndex: 'supply_voltage',
                              width: 150,
                              render: (text, record) => (
                                (record.data.supply_voltage / 1000).toFixed(3)),
                            },
                            {
                              title: <span>信号质量(dbm)</span>,
                              dataIndex: 'network_signal_quality',
                              render: (text, record) => (
                                record.data.network_signal_quality
                              ),
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 400 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: item.key,
                          channel: 0,
                        }} meta={this.state[`${item.key}_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'sensor_0'||item.key === 'sensor_1') {
                    renderTab = <TabPane
                      tab={<span>{item.name} {isInAlarmContent(this.state.alarm_content,'sensor',item.key.indexOf('0')>=0?0:1)&&<Icon type="bell" style={{color:'red'}}/>}</span>
                       } key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[item.key].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[item.key].loading}
                          rowKey={'id'}
                          dataSource={this.state[item.key].data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '状态',
                              dataIndex: 'status',
                              width: 150,
                              render: (text, record) => {
                                let color='',value='';
                                switch (Number(record.data.status)) {
                                  case 0:
                                    color='green';
                                    value='正常';
                                    break;
                                  case 1:
                                    color='purple';
                                    value='过压';
                                    break;
                                  case 2:
                                    color='orange';
                                    value='欠压';
                                    break;
                                  case 3:
                                    color='red';
                                    value='故障';
                                    break;

                                }
                                return <Badge color={color} text={value} />
                              }

                            },
                            {
                              title: '压力(MPa)',
                              dataIndex: 'value',
                              render: (text, record) => (
                                record.data.value
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'sensor',
                          channel: item.key==='sensor_0'?0:1,
                        }} meta={this.state[item.key].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'sensor_2') {
                    renderTab = <TabPane  tab={<span>{item.name} {isInAlarmContent(this.state.alarm_content,'sensor',2)&&<Icon type="bell" style={{color:'red'}}/>}</span>
                    } key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`sensor_2`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`sensor_2`].loading}
                          rowKey={'id'}
                          dataSource={this.state.sensor_2.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 200,
                            },
                            {
                              title: '状态',
                              dataIndex: 'status',
                              width: 150,
                              render: (text, record) => {
                                let color='',value='';
                                switch (Number(record.data.status)) {
                                  case 0:
                                    color='green';
                                    value='正常';
                                    break;
                                  case 1:
                                    color='purple';
                                    value='过高';
                                    break;
                                  case 2:
                                    color='orange';
                                    value='过低';
                                    break;
                                  case 3:
                                    color='red';
                                    value='故障';
                                    break;

                                }
                                return <Badge color={color} text={value} />
                              }

                            },
                            {
                              title: '液位',
                              dataIndex: 'value',
                              render: (text, record) => (
                                record.data.value
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'sensor',
                          channel: 2,
                        }} meta={this.state[`sensor_2`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'ball_valve_0'||item.key === 'ball_valve_1') {
                    renderTab = <TabPane  tab={<span>{item.name} {isInAlarmContent(this.state.alarm_content,'ball_valve',item.key.indexOf('0')>=0?0:1)&&<Icon type="bell" style={{color:'red'}}/>}</span>
                    } key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[item.key].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[item.key].loading}
                          rowKey={'id'}
                          dataSource={this.state[item.key].data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 170
                            },
                            {
                              title: '目标位置',
                              width:100,
                              dataIndex: 'status',
                              render: (text, record) => {
                                let color='',value='';
                                switch (Number(record.data.status)) {
                                  case 1:
                                    color='green';
                                    value='开阀';
                                    break;
                                  case 0:
                                    color='red';
                                    value='关阀';
                                    break;
                                  default:
                                    break;
                                }
                                return <Badge color={color} text={value} />
                              }
                            },
                            {
                              title: '当前位置',
                              width:130,
                              dataIndex: 'position',
                              render: (text, record) => {
                                let color='',value='';
                                switch (Number(record.data.position)) {
                                  case 0:
                                    value = '关阀';
                                    color = '#f50';
                                    break;
                                  case 1:
                                    value = '开阀';
                                    color = '#87d068';
                                    break;
                                  case 2:
                                    value = '移动中';
                                    color = '#108ee9';
                                    break;
                                  case 3:
                                    value = '故障';
                                    color = 'yellow';
                                    break;
                                  default:
                                    break;

                                }
                                return <Badge color={color} text={value}/>
                              }
                            },
                            {
                              title: '故障标记',
                              dataIndex: 'fault_sign',
                              render: (text, record) => {
                                let color='',value='';
                                if(Number(record.data.fault_sign)===0){
                                  color='green';
                                  value='正常';
                                }else{
                                  color='red';
                                  value='异常';
                                }

                                return <Badge color={color} text={value}/>
                              }
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'ball_valve',
                          channel: item.key==='ball_valve_0'?0:1,
                        }} meta={this.state[`${item.key}`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  if (item.key === 'digital_input_0') {
                    renderTab = <TabPane  tab={<span>{item.name} {isInAlarmContent(this.state.alarm_content,'digital_input',0)&&<Icon type="bell" style={{color:'red'}}/>}</span>
                    } key={item.key}>
                      <div>
                        <Table
                          style={{ color: '#fff' }}
                          className={`custom-small-table ${this.state[`digital_input_0`].data.length === 0 && 'custom-small-table2'}`}
                          loading={this.state[`digital_input_0`].loading}
                          rowKey={'id'}
                          dataSource={this.state.digital_input_0.data}
                          columns={[
                            {
                              title: '采集时间',
                              dataIndex: 'collected_at',
                              width: 160,
                            },
                            {
                              title: '井盖状态',
                              dataIndex: 'level',
                              width: 160,
                              render: (text, record) => {
                                return Number(record.data.level)===0? <Badge color="#87d068" text="关闭" />: <Badge color="#f50" text="打开" />
                              }
                            },
                            {
                              title: '报警',
                              dataIndex: 'alarm',
                              render: (text, record) => (
                                Number(record.data.alarm===1)? <Badge color="#f50" text="报警" />: <Badge color="#87d068" text="正常" />
                              )
                            },
                          ]}
                          pagination={false}
                          size="small"
                          scroll={{ x: true, y: 405 }}
                        />
                        <MyPagination className="history-pagination" searchCondition={{
                          type: 'digital_input',
                          channel: 0,
                        }} meta={this.state[`digital_input_0`].meta} handleSearch={this.fetch}/>
                      </div>
                    </TabPane>;
                  }
                  return renderTab;
                })
              }
            </Tabs>

          </TabPane>
        </Tabs>
        <Modal
          title={<BuildModalTitle visible={this.state.HistoryDataModal} modalClass="HistoryDataModal"
                                  title={`${this.props.name} 历史数据`}/>}
          destroyOnClose
          onCancel={() => {
            this.setState({
              HistoryDataModal: false,
            });
          }}
          width={1100}
          centered
          className="HistoryDataModal"
          afterClose={() => {
            afterCloseModal(); // destroyOnClose需要
          }}
          visible={this.state.HistoryDataModal}
          footer={null}
        >
          <ValveHistoryData name={this.state.name}
                            renderName={this.state.renderName}
                            color={this.state.color}
                            type={this.state.type}
                            channel={this.state.channel}
                            workstation_id={this.props.editRecord.id}/>
        </Modal>

      </div>

    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
